/**
 * @description
 * @readonly
 * @enum {string}
 */
const ImageNames = {
  bg: "bg",
  bg2: "bg2",
  bg3: "bg3",
  bg4: "bg4",
  cloud: "cloud",
  cloud5: "cloud5",
  cloud2: "cloud2",
  cloud3: "cloud3",
  cloud4: "cloud4",
  boy: "boy",
  basket1: "basket1",
  apple: "apple",
  banana: "banana",
  orange: "orange",
  setting: "setting",
};

/**
 * @description
 * @type {{
 * name:ImageNames;
 * path:string;
 * description:string;
 * }[]}
 */
const imageList = [
  {
    name: ImageNames.bg,
    path: "./assets/bg1.jpg",
    description: "背景图片",
  },
  {
    name: ImageNames.bg2,
    path: "./assets/bg2.png",
    description: "背景图片",
  },
  {
    name: ImageNames.bg3,
    path: "./assets/bg3.jpg",
    description: "背景图片",
  },
  {
    name: ImageNames.bg4,
    path: "./assets/bg4.jpg",
    description: "背景图片",
  },
  {
    name: ImageNames.cloud,
    path: "./assets/cloud.png",
    description: "云",
  },
  {
    name: ImageNames.cloud2,
    path: "./assets/cloud2.png",
    description: "云",
  },
  {
    name: ImageNames.cloud3,
    path: "./assets/cloud3.png",
    description: "云",
  },
  {
    name: ImageNames.cloud4,
    path: "./assets/cloud4.png",
    description: "云",
  },
  {
    name: ImageNames.cloud5,
    path: "./assets/cloud5.png",
    description: "云",
  },
  {
    name: ImageNames.boy,
    path: "./assets/boy.png",
    description: "男孩",
  },
  {
    name: ImageNames.basket1,
    path: "./assets/basket1.png",
    description: "篮筐",
  },
  {
    name: ImageNames.apple,
    path: "./assets/apple.png",
    description: "苹果",
  },
  {
    name: ImageNames.banana,
    path: "./assets/banana.png",
    description: "香蕉",
  },
  {
    name: ImageNames.orange,
    path: "./assets/orange.png",
    description: "橘子",
  },
  {
    name: ImageNames.setting,
    path: "./assets/setting.png",
    description: "设置",
  },
];

/**
 * @description 创建Image元素
 * @returns {HTMLImageElement[]}
 */
function createImgs() {
  /**
   * @type {HTMLImageElement[]}
   */
  const imgs = [];
  for (let index = 0; index < imageList.length; index++) {
    const element = imageList[index];
    const img = new Image();
    img.id = element.name;
    img.src = element.path;
    img.alt = element.description;
    img.style.position = "absolute";
    img.style.left = "-9999px";
    imgs.push(img);
  }
  return imgs;
}

/**
 * @description 加载图片资源
 */
async function loadImageAssets() {
  const imgs = createImgs();
  for (let index = 0; index < imgs.length; index++) {
    const img = imgs[index];
    document.body.appendChild(img);
  }
  await Promise.all(
    imgs.map(
      (image) =>
        new Promise((resolve) => image.addEventListener("load", resolve))
    )
  );
}
